<template>
  <div id="login">
      <div class="picTop">
          <img :src="imgUrl" alt="">
      </div>
      <div class="picMiddle">
          <img :src="imgUr2" alt="">
      </div>
      <div class="login">
            <div class="select-login fixClear">
                <span class="phone" :class="{active: !isActive}">手机号登录</span>
                <span class="pwd" :class="{active: isActive}">密码登录</span>
            </div>
            <div class="inputBox">
                <input type="text" :placeholder="text_1" v-model="test1" @focus="pitchUp_1" @blur="unCheck_1">
            </div>
            <div class="inputBox_">
                <span class="get-test" v-if="isChange">获取验证码</span>
                <span class="pwd-forget" v-else>忘记密码？</span>
                <input type="text" :placeholder="text_2" v-model="test2" @focus="pitchUp_2" @blur="unCheck_2">
            </div>
            <div class="loginBox">
                <button @click="LoginClick">登录</button>
            </div>
            <div class="prompt">
                <p>未注册手机登录后即自动注册</p>
                <div class="sp"><span>代表同意手匠<span class="blue-color">用户协议</span><span>和</span><span class="blue-color">隐私政策</span></span></div>
            </div>
      </div>
      <div class="other">
          <p>其他登录方式</p>
      </div>
      <div class="icon-login">
          <div class="icon">
              <img :src="imgUr3" alt="">
              <span>微博</span>
          </div>
          <div class="icon">
              <img :src="imgUr4" alt="">
              <span>QQ</span>
          </div>
          <div class="icon">
              <img :src="imgUr5" alt="">
              <span>微信</span>
          </div>
      </div>
      <div class="error" v-show="isLogin">
        <span>手机号或验证码错误</span>
      </div>
  </div>
</template>

<script>
const Mock = require('mockjs')
Mock.Random.extend({
  phone: function () {
    var phonePrefixs = ['132', '135', '189']
    return this.pick(phonePrefixs) + Mock.mock(/\d{8}/)
  },
  verificationCode() {
      return Mock.mock(/\d{4}/)
  }
})
console.log(Mock.Random.phone())
console.log(Mock.Random.verificationCode())
export default {
  name: 'Login',
  data() {
      return {
          test1: Mock.Random.phone(),
          test2: Mock.Random.verificationCode(),
          text_1: '请输入手机号',
          text_2: '请输入验证码',
          isActive: false,
          isChange: true,
          isText: false,
          isLogin: false,
          imgUrl: require('../../assets/img/login/login_icon_cancel@2x.png'),
          imgUr2: require('../../assets/img/login/login_logo@2x.png'),
          imgUr3: require('../../assets/img/login/login_icon_weibo@2x.png'),
          imgUr4: require('../../assets/img/login/login_icon_qq@2x.png'),
          imgUr5: require('../../assets/img/login/login_icon_wechat@2x.png'),
      }
  },
  methods: {
      
      pitchUp_1() {
          this.text_1 = '';
      },
      unCheck_1() {
          if(this.isText === this.isActive){
            this.text_1 = '请输入手机号';
          }else{
              this.text_1 = '请输入手机号或账号';
          }
      },
      pitchUp_2() {
          this.text_2 = '';
      },
      unCheck_2() {
          if(this.isText === this.isActive){
            this.text_2 = '请输入验证码';
          }else{
              this.text_2 = '请输入密码';
          }
      },
      LoginClick() {
          if(this.test1 && this.test2){
              localStorage.setItem('isLogin','1');
              this.$router.push('/home');
          }else{
              this.isLogin = !this.isLogin;
          }
      },
  }
}
</script>

<style scoped>
    @import '../../assets/css/common.css';
    .error{
        opacity: 0;
        animation: errorLeave 2s linear;
    }
    @keyframes errorLeave{
        from{
            opacity: 1;
        }
        to{
            opacity: 0;
        }
    }
    body{
        background-color: #fff;
    }
    .picTop {
        margin: 12px 0 0 34px;
    }
    .picTop img{
        width: 24px;
        height: 24px;
    }
    .picMiddle{
        margin: 32px auto;
        text-align: center;
    }
    .picMiddle img{
        width: 120px;
        height: 76px;
    }
    .login{
        padding: 26px 30px 0;
        height: auto;
    }
    .select-login span{
        float: left;
        display: block;
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        padding: 4px 0 0 0;
    }
    .active{
        border-bottom: 2px solid #333333;
    }
    .pwd{
        margin-left: 40px;
    }
    .inputBox{
        margin-top: 40px;
    }
    .inputBox input,.inputBox_ input{
        border: none;
        border-bottom: 1px solid #E6E6E6;
        width: 100%;
        padding: 0 0 16px 0;
        font-size: 14px;
        font-weight: 400;
        color: #999999;
    }
    .inputBox_{
        margin-top: 32px;
        position: relative;
    }
    .inputBox_ .get-test{
        position: absolute;
        right: 19px;
        top: 0;
        font-size: 14px;
        font-weight: 400;
        color: #333333;
    }
    .inputBox_ .pwd-forget{
        position: absolute;
        right: 1px;
        bottom: -22px;
        font-size: 10px;
        font-weight: 400;
        color: #57A6E2;
    }
    .loginBox{
        margin-top: 40px;
        text-align: center;
    }
    .loginBox button{
        width: 315px;
        height: 40px;
        background-color: #1b7373;
        border-radius: 8px;
        border: none;
        font-size: 16px;
        font-weight: bold;
        color: #FFFFFF;
    }
    .prompt{
        margin-top: 16px;
        text-align: center;
    }
    .prompt p,.prompt span{
        font-size: 14px;
        font-weight: 400;
        color: #999999;
    }
    .sp{
        margin-top: 5px;
    }
    .blue-color{
        color: #57A6E2 !important;
    }
    .other{
        margin-top: 40px;
        text-align: center;
    }
    .other p{
        font-size: 14px;
        font-weight: 400;
        color: #999999;
    }
    .icon-login{
        margin-top: 20px;
        padding: 0 60px;
        display: flex;
    }
    .icon{
        flex: 1;
        text-align: center;
    }
    .icon img{
        width: 50px;
        height: 50px;
        vertical-align: middle;
    }
    .icon span{
        display: block;
        font-size: 12px;
        color: #999999;
        font-weight: 400;
    }
    .error{
        width: 100px;
        height: 20px;
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        background-color: rgba(100, 100, 100, .6);
        text-align: center;
        line-height: 20px;
        border-radius: 5px;
    }
    .error span{
        display: block;
        color: #fff;
        font-size: 10px;
    }
</style>